﻿@page "/DatePicker/Default-Functionalities"

@using Syncfusion.Blazor.Calendars

@inherits SampleBaseComponent;

<SampleDescription>
   <p>The following sample demonstrates the default functionalities of the DatePicker. Today's date is always <code>highlighted</code> in the popup calendar and it get focused if there's no selected date. Click the desired date from the popup calendar and the selected date will be displayed in the element.</p>
</SampleDescription>
<ActionDescription>
    <p>The <code>DatePicker</code> is a graphical user interface component that allows the user to select, or to enter a date value.</p>
    <p>More information on the DatePicker instantiation can be found in the <a href='https://blazor.syncfusion.com/documentation/datepicker/getting-started/' target='_blank'> documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <div id="wrapper" class="datepicker-section">
        <div id="datepicker-control">
            <SfDatePicker TValue="DateTime?" Placeholder="Choose a Date"></SfDatePicker>
        </div>
    </div>
</div>

<style>
    #wrapper {
        max-width: 300px;
        margin: 0px auto;
        padding-top: 20px;
    }
</style>
